<template>
  <div class="container">
    <el-card>
      <el-form :model="update" label-width="80px" :inline="false" size="normal">
        <el-form-item label="版本号">
          <el-input v-model="update.content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="save1()"
            >保存</el-button
          >
        </el-form-item>
      </el-form>

      <el-form
        :model="update_url"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-form-item label="新版链接">
          <el-input v-model="update_url.content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="save2()"
            >保存</el-button
          >
          <el-button
            type="warning"
            native-type="file"
            size="small"
            @click="goFile()"
            >上传APK</el-button
          >
          <input
            type="file"
            style="display: none;"
            id="file"
            ref="files"
            @change="upload"
          />
        </el-form-item>
      </el-form>

      <el-form
        :model="update_des"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-form-item label="版本介绍">
          <el-input
            :autosize="{ minRows: 4 }"
            type="textarea"
            v-model="update_des.content"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="save3()"
            >保存</el-button
          >
        </el-form-item>
      </el-form>

      <el-form
        :model="update_des"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-form-item label="发布公告">
          <el-input
            :autosize="{ minRows: 4 }"
            type="textarea"
            v-model="notice.content"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="small" @click="save4()"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getSystem, updateSystem, upload } from "@/api/system";
export default {
  data() {
    return {
      update: {},
      update_url: {},
      update_des: {},
      notice: {}
    };
  },
  created() {
    getSystem({ name: "update" }).then(res => {
      this.update = res[0];
    });
    getSystem({ name: "update_url" }).then(res => {
      this.update_url = res[0];
    });
    getSystem({ name: "update_des" }).then(res => {
      this.update_des = res[0];
    });
    getSystem({ name: "notice" }).then(res => {
      let r = res[0];
      r.content = JSON.parse(r.content);
      delete r.content.time;
      r.content = r.content.content;
      this.notice = r;
    });
  },
  methods: {
    goFile() {
      this.$refs.files.click();
    },
    upload(e) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let file = e.target.files[0];
      let data = new FormData();
      data.set("file", file);
      upload(data).then(res => {
        this.update_url.content = res.url;
        loading.close();
      });
    },
    save1() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      updateSystem(this.update)
        .then(res => {
          this.$notify({
            title: "成功",
            message: "保存成功",
            type: "success"
          });
        })
        .finally(_ => {
          loading.close();
        });
    },
    save2() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      updateSystem(this.update_url)
        .then(res => {
          this.$notify({
            title: "成功",
            message: "保存成功",
            type: "success"
          });
        })
        .finally(_ => {
          loading.close();
        });
    },
    save3() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      updateSystem(this.update_des)
        .then(res => {
          this.$notify({
            title: "成功",
            message: "保存成功",
            type: "success"
          });
        })
        .finally(_ => {
          loading.close();
        });
    },
    save4() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let o = {
        time: new Date().getTime(),
        content: this.notice.content
      };
      let r = JSON.parse(JSON.stringify(this.notice));
      r.content = JSON.stringify(o);
      updateSystem(r)
        .then(res => {
          this.$notify({
            title: "成功",
            message: "保存成功",
            type: "success"
          });
        })
        .finally(_ => {
          loading.close();
        });
    }
  }
};
</script>

<style scoped>
.box {
  display: flex;
}
.box .el-collapse {
  flex: 1;
}
.container >>> .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-height: calc(100% - 30px);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}
.container >>> .el-dialog__body {
  flex: 1;
  overflow: auto;
}
.action {
  height: 48px;
  display: flex;
  align-items: center;
}
.action .add {
  font-size: 20px;
  padding: 5px;
  color: #409eff;
  cursor: pointer;
}
.action .delete {
  font-size: 20px;
  padding: 5px;
  color: #f56c6c;
  cursor: pointer;
}
</style>
